<template >
    <div>
      <div class="search">
          <div class="input">
              <label>快递公司名称：</label><el-input placeholder="请输入ID" label="条件"></el-input>
              <label>快递公司编码：</label><el-input placeholder="请输入编码" label="条件"></el-input>
              <!-- <label>：</label><el-input v-model="condition" placeholder="请输入名称" label="条件"></el-input> -->
              <el-button type="primary" class="se" style="margin-left:10px;">搜索</el-button>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs">新增</el-button>
      </div>
      <tableVue :list="list" :state="false">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">详情
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="新增快递公司" :dialog="dialog" @close="changeData">
          <slot>
            <p><label>快递公司名称：</label><input type="text" placeholder="请输入机构编码"></p>
            <p><label>快递公司编码：</label><input type="text" placeholder="请输入名称"></p>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './expressData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    methods : {
      dialogs() {
        this.dialog = true;
      },
      changeData (val) {
          this.dialog = val
      },
      handleEdit(idx,item){
        console.log(idx)
        console.log(item.id)
      }
    }
}
</script>

<style scoped>
  .search {
    width: 100%;
    background-color: #fff;
    padding:20px;
    box-sizing: border-box;
    margin-top: 10px;
    height: 80px;
  }
  .input {
    /* width: 300px; */
    display: flex;
  }
  label {
    line-height: 40px;
    color: #333;
    margin: 0 10px;
  }
  .el-input {
    width:200px;
    height:20px;
  }
  .add {
    margin-top: 10px;
    padding-left: 14px;
  }
  .se {
    margin-left: 20px;
  }
</style>
